<script>
import useUserStore from '@/stores/user'
import {mapActions} from "pinia";
import Navbar from "@/components/Navbar.vue";
import useModelStore from '@/stores/modal.js'
import {ref, toRefs} from "vue";
import Sidebar from "@/components/Sidebar.vue";
import HomeVideoCard from "@/components/HomeVideoCard.vue";

export default {
  name: '404 not found',
  components: {HomeVideoCard, Sidebar, Navbar},
  // 路由守卫
  beforeRouteEnter(to, from, next) {
    const store = useUserStore()
    console.log('beforeRouteEnter Guard')
    // if (store.userLoggedIn) {
    next()
    // } else {
    //   next({name: 'login'})
    // }
  },
  setup() {
    const model = useModelStore()
    const {logout} = useUserStore()

    return {
      // model,
      signOut: logout,
      ...toRefs(model),
    }
  },
  methods: {
    logout() {
      this.signOut()
      this.$router.push({name: 'login'})
    },
    toggleAuthModal() {
      this.isOpen = !this.isOpen
      console.log(this.isOpen)
      console.log(this.hiddenClass)
    }
  }
}
</script>

<template>
  <!--    <button class="bg-cyan-200 rounded p-2" @click="logout">logout</button>-->
  <div class="min-h-screen flex flex-row justify-center">
    <Sidebar/>
    <div class="w-[90%] min-h-screen bg-amber-50 m-4 p-2 flex flex-col items-center">
      <!--  头部  -->
      <div class="w-full ">
        <div class="flex flex-row items-center gap-12">
          <div class="flex-1 ml-12 my-12 relative">
            <img
                class=" min-h-96 rounded-lg"
                src="@/assets/white-game-play-male-recreation-think-1056749-pxhere.com.jpg" alt=""/>
            <span class="text-2xl p-4 absolute bottom-0 text-white font-black ">
            人工智能崛起: AI与国际象棋大师最终决战!人类能否笑到最后?
          </span>
          </div>
          <div class="flex-1 grid grid-cols-2 gap-y-2 pr-12">
            <HomeVideoCard type="video" v-for="item in ([1,2,3,4])" :key="item"/>
          </div>
        </div>
      </div>
      <div class="w-[90%] mt-10 mb-16">
        <hr class=" border"/>
      </div>
      <!--  中部: 其他视频  -->
      <div class="flex flex-row flex-wrap w-full pl-3 pr-6 justify-center">
        <div class="grid grid-cols-5 gap-x-0 w-full gap-4">
          <HomeVideoCard type="video" v-for="item in ([1,2,3,4,5])" :key="item"/>
          <HomeVideoCard type="video" v-for="item in ([1,2,3,4,5])" :key="item"/>
        </div>
      </div>
      <div class="w-[90%] m-10 mt-16">
        <hr class=" border"/>
      </div>
      <!--   底部: 直播   -->
      <div class="w-full ">
        <div class="flex flex-row items-center gap-12">
          <div class="flex-1 ml-12 my-12 relative">
            <img
                class=" min-h-96 rounded-lg"
                src="@/assets/man-rock-person-music-male-concert-1329676-pxhere.com.jpg" alt=""/>
            <span class="text-2xl p-4 absolute bottom-0 text-white font-black ">
            正在直播: rock-band乐队音乐会
          </span>
          </div>
          <div class="flex-1 grid grid-cols-2 gap-y-2 pr-12">
            <HomeVideoCard type="live" v-for="item in ([1,2,3,4])" :key="item"/>
          </div>
        </div>
      </div>
      <div class="w-[90%] mt-10 mb-16">
        <hr class=" border"/>
      </div>
      <!--   其他直播   -->
      <div class="flex flex-row flex-wrap w-full pl-3 pr-6 justify-center">
        <div class="grid grid-cols-5 gap-x-0 w-full gap-4">
          <HomeVideoCard type="live" v-for="item in ([1,2,3,4,5])" :key="item"/>
        </div>
      </div>
      <!--   todo: 短视频   -->
    </div>
  </div>
</template>
